<template>
  <div>
    <el-container>
      <el-header
        >数据中心
        <div class="bread">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="v in list" :key="v.path">
              <router-link :to="v.path">{{ v.meta.title }}</router-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu class="el-menu-vertical-demo" :default-active="$route.path">
            <!-- 有children菜单 -->
            <el-submenu
              :index="item.label"
              v-for="(item, index) in hasChildren"
              :key="index"
            >
              <template slot="title">
                <div @click="clickDh(item)">
                  <i :class="'el-icon-' + item.icon"></i>
                  <span>{{ item.label }}</span>
                </div>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  :index="subItem.path"
                  v-for="(subItem, subIndex) in item.children"
                  :key="subIndex"
                  @click="clickMenu(subItem)"
                  >{{ subItem.label }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <!-- 无children菜单 -->
            <el-menu-item
              :index="item.path"
              v-for="item in noChildren"
              :key="item.path"
            >
              <div @click="clickQt(item)">
                <i :class="'el-icon-' + item.icon"></i>
                <span>{{ item.label }}</span>
              </div>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <tag></tag>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Tag from "../components/Tag.vue";
import { getData } from "../api/navData.js";
export default {
  components: { Tag },
  data() {
    return {
      // 路由信息
      list: this.$route.matched,
      // 菜单栏数据
      asideMenu: [],
    };
  },
  computed: {
    // 没有子菜单
    noChildren() {
      return this.asideMenu.filter((item) => !item.children);
    },
    // 有子菜单
    hasChildren() {
      return this.asideMenu.filter((item) => item.children);
    },
  },
  methods: {
    clickMenu(item) {
      this.$router.push(item.path);
      this.$store.commit("tab/selectMenu", item);
    },
    clickDh(item) {
      this.$router.push(item.path);
    },
    clickQt(item) {
      this.$router.push(item.path);
      this.$store.commit("tab/selectMenu", item);
    },
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.list = to.matched;
    },
  },
  created() {
    const number = async () => {
      const data = await getData();
      this.asideMenu = data;
    };
    number();
  },
};
</script>
<style scoped lang="less">
.el-header {
  line-height: 60px;
  color: #707070;
  font-size: 20px;
  border-bottom: 0.5px solid #ccc;
  font-weight: 555;
}

.el-aside,
.el-main {
  height: 92vh;
}

.el-menu {
  height: 100%;
}

.bread {
  position: absolute;
  left: 198px;
  top: 20px;
  width: 600px;
  height: 30px;
}
</style>
